import React from 'react';

import { urls } from '@/shared/constants';
import { urlComponents } from '@/shared/constants/stores';
import { Button, ButtonVariants, Container } from '@/shared/ui';
import cn from 'classnames';
import dynamic from 'next/dynamic';
import Image from 'next/image';

import companyNameBottle from '../../images/parallax-companyName-bottle.svg';
import Broccoli from '../../images/parallax-broccoli.svg';
import Carrot from '../../images/parallax-carrot.svg';
import Cup from '../../images/parallax-cup.svg';
import PhoneFrame from '../../images/phone-frame.png';
import cs from './Main.module.scss';

const ParallaxContainer = dynamic(() => import('../Parallax'));

type ComponentsKey = keyof typeof urlComponents;
type UrlKey = keyof typeof urls;

const urlText = {
  appStore: 'AppStore',
  googlePlay: 'GooglePlay',
  ruStore: 'RuStore',
  appGallery: 'AppGallery',
};

export const Main = () => (
  <>
    <Container className={cs.wrapper}>
      <div className={cs.info}>
        <h1 className="h1">Первый прикорм</h1>
        <p className={cs.descr}>
          Приложение помогает вводить прикорм для малыша.<span> </span>
          <br className="hide-less-xs" />
          Меню формируется автоматически.
        </p>
        <div className={cs.socials}>
          {Object.entries(urlText).map(([url, text]) => (
            <Button
              aria-label={text}
              className={cs.socialsButton}
              data-testid={`link-${url}`}
              href={urls[url as UrlKey]}
              key={url}
              link
              variant={ButtonVariants.Secondary}
            >
              <span className={cn(cs.socialsIcon, { [cs.appleIcon]: url === 'appStore' })}>
                {urlComponents[url as ComponentsKey]}
              </span>
              <span className={cs.socialsText}>{text}</span>
            </Button>
          ))}
        </div>
      </div>
    </Container>
    <ParallaxContainer>
      <Image
        alt="Broccoli"
        className={cn(cs.parallaxItem, 'parallax-item')}
        data-speed={4}
        draggable="false"
        height={112}
        src={Broccoli}
        width={112}
      />
      <Image
        alt="Cup"
        className={cn(cs.parallaxItem, 'parallax-item')}
        data-speed={3}
        draggable="false"
        height={112}
        src={Cup}
        width={112}
      />
      <Image
        alt="companyNameBottle"
        className={cn(cs.parallaxItem, 'parallax-item')}
        data-speed={4}
        draggable="false"
        height={112}
        src={companyNameBottle}
        width={112}
      />
      <Image
        alt="Carrot"
        className={cn(cs.parallaxItem, 'parallax-item')}
        data-speed={3}
        draggable="false"
        height={112}
        src={Carrot}
        width={112}
      />
      <div className={cs.phone}>
        <Image alt="video showcase" className={cs.frame} draggable="false" height={624} src={PhoneFrame} width={296} />
        <video autoPlay className={cs.video} controls={false} loop muted playsInline preload="false">
          <source src="/video.mp4" />
        </video>
      </div>
    </ParallaxContainer>
  </>
);
